<template>
  <!-- 组件根标签 -->
  <div class="shareList">
    <!-- <h4>面经分享列表页面</h4> -->
    <hmnavbar title="我的分享面经" @back="$router.push('/find')"></hmnavbar>
    <div class="search" @click="$router.push('/searchdata')">
      <i class="iconfont iconicon_search"></i>
      <span>请输入关键字</span>
    </div>

    <!-- 文章列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="已经到底了~~~"
      @load="onLoad"
      offset="100"
    >
      <!--  导入面经分享数据的组件 -->
      <shareitem
        @xiangqingshare="$router.push(`/xiangqingshare/${item.id}`)"
        :item="item"
        v-for="(item, index) in list"
        :key="index"
      ></shareitem>
    </van-list>
  </div>
</template>
<script>
// 导入获取面经分享数据的接口
import { getSharedatas } from './../../../api/article'
import shareitem from './../find/shareItem'
export default {
  name: 'shareList',
  data () {
    return {
      // 接口发送回来的数据
      list: [],
      // vant-list组件的刷新控制功能
      loading: false,
      // vant-list组件的数据全部加载完的功能控制
      finished: false,
      // 列表起始的索引
      start: -5,
      // 每页几条数据的页容量
      limit: 5,
      // 数据的总条数
      total: 0
    }
  },
  methods: {
    // vant-list组件获取数据的的方法
    async onLoad () {
      console.log('vant-list组件')
      this.start += this.limit
      const res = await getSharedatas({
        start: this.start,
        limit: this.limit
      })
      console.log(res)
      this.total = res.data.data.total
      // 追加到数据数组中
      this.list.push(...res.data.data.list)

      // 关闭加载状态的提示 -- 加载中...
      this.loading = false

      // 如果获取到的数据的数组长度===了数据的总条数,那么就停止加载的onLoad事件
      if (this.list.length === this.total) {
        this.finished = true
      }
    }
  },
  components: {
    shareitem
  }
}
</script>
<style lang="less" scoped>
.shareList {
  .search {
    margin: auto;
    width: 345px;
    height: 34px;
    background: #f7f4f5;
    border-radius: 17px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #b6b6bf;
    .iconfont {
      font-size: 18px;
      margin-right: 10px;
    }
  }
}
</style>
